import { ArrowLeft, BrowsingHistoryO } from '@react-vant/icons';
import React, { useEffect,useState } from 'react';
import '../css/HomeList.css'
import { useNavigate } from 'react-router-dom';
import http from '../utils/request'
import { InfiniteScroll } from 'antd-mobile'
import { BackTop } from '@nutui/nutui-react'

const BaiKe = () => {
    const [hasMore, setHasMore] = useState(true)
    async function loadMore() {
      const append = await http.get('/bk')
      .then((res)=>{
           return res.data.bkList
      })
      setbkList(val => [...val, ...append])
      setHasMore(append.length > 0)
    }
    const [openSet, setopenSet] = React.useState(1);
    const navigate = useNavigate();
    const [bkList, setbkList] = useState<Array<any>>([])
    const getBkList = () => {
        http.get('/bk')
            .then(res => {
                setbkList(res.data.bkList)
            })
            .catch(err => {
                console.log(err)
            })
    }

    useEffect(() => {
        getBkList()
    }, [])

    return (
        <>
            <div style={{ position: 'fixed', top: '0', left: '0', width: '100%', zIndex: '999', backgroundColor: '#fff' }}>
                <div className='bkTitle'>
                    <ArrowLeft onClick={() => {
                        navigate(-1);
                    }} style={{ fontSize: '25px', color: '#333', marginLeft: '10px', marginTop: '10px' }} />
                    <h2>百科</h2>
                </div>
                <div className='bkList'>
                    <div onClick={() => setopenSet(1)} style={{ color: openSet === 1 ? 'red' : 'black', borderBottom: openSet === 1 ? '2px solid orange' : 'none' }}>推荐</div>
                    <div onClick={() => setopenSet(2)} style={{ color: openSet === 2 ? 'red' : 'black', borderBottom: openSet === 2 ? '2px solid orange' : 'none' }}>养宠宝典</div>
                    <div onClick={() => setopenSet(3)} style={{ color: openSet === 3 ? 'red' : 'black', borderBottom: openSet === 3 ? '2px solid orange' : 'none' }}>行为运动</div>
                    <div onClick={() => setopenSet(4)} style={{ color: openSet === 4 ? 'red' : 'black', borderBottom: openSet === 4 ? '2px solid orange' : 'none' }}>健康百科</div>
                </div>
            </div>
            <div className='bkContent'>
                {
                    bkList.map((item: any, index: number) => {
                        if (item.cate === openSet) {
                            return (
                                <div className='bkContentItem' key={index}>
                                    <img src={item.image} alt="" />
                                    <p>{item.name}</p>
                                    <div className='bkContentItemBottom'>
                                        <div><img src={item.proimage} alt="" style={{ marginRight: '10px' }} />{item.proname}</div>
                                        <div><BrowsingHistoryO style={{ marginRight: '10px' }} />{item.liulan}</div>
                                    </div>
                                </div>
                            )
                        }
                    })
                }
            </div>
            {/* <InfiniteScroll loadMore={loadMore} hasMore={hasMore} /> */}
        </>
    )
}
export default BaiKe;